let that 
class Tabs {
    constructor(id) {

        that = this

        this.main = document.querySelector(id) //id相当于形参


        this.addBtn = this.main.querySelector('.tabadd')

        this.ul = this.main.querySelector('.firstNav ul')
        this.sectionsFather = this.main.querySelector('.tabscon')

        this.init() // 调用
    }
    // 初始化绑定事件
    init() {
        this.lis = this.main.querySelectorAll('.firstNav li')

        this.sections = this.main.querySelectorAll('.tabscon section')

        this.addBtn.addEventListener('click', this.addTabs)

        this.lis.forEach((item,index) => {
            item.index = index
            item.addEventListener('click', this.toggleTabs)
        })
    }

 
    // 清除所有class
    clearClassName() {
        this.lis.forEach(item =>  item.className = '' )
        this.sections.forEach(item => item.className = '')
    }

    // 切换功能
    toggleTabs() {
        that.clearClassName()  // 调用上面的清除所有class方法。
        
        this.className = 'liactive'  //li就相当于改变this里面item的参数传过来

        that.sections[this.index].className ='conactive'
    }  

    // 添加功能
    addTabs() {
        that.clearClassName()
        let li =`<li class="liactive"><span>新增测试</span><span class="iconfont icon-guanbi"></span></li>`
        
        let section = ` <section class="conactive">测试${Math.random()}</section>`

        that.ul.insertAdjacentHTML('beforeend', li)

        that.sectionsFather.insertAdjacentHTML('beforeend', section)

        that.init()
    }
}


new Tabs('#tab') //里面是实参